<%@ page
	language="java"
	contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
	rel="stylesheet"
	href="/d2/_css/selector.css" />
<style>
/* ******************************************************************[temp */
body {
	background-color: #AAAAAA;
}

* {
	margin: 0px;
	padding: 0px;
	font-family: Consolas;
	font-size: 12px;
}

ul {
	list-style: none;
}

/* ******************************************************************* source */
.local {
	background: url("./_img/make.gif") no-repeat -0px -50px;
}

.web {
	background: url("./_img/make.gif") no-repeat -100px -50px;
}

.tag {
	background: url("./_img/make.gif") no-repeat -200px -50px;
}

.category {
	background: url("./_img/make.gif") no-repeat -300px -50px;
}
/* ******************************************************************* style */
.nonSleeve {
	background: url("./_img/make.gif") no-repeat -0px -150px;
}

.halfSleeve {
	background: url("./_img/make.gif") no-repeat -100px -150px;
}

.MTM {
	background: url("./_img/make.gif") no-repeat -200px -150px;
}

.sibori {
	background: url("./_img/make.gif") no-repeat -300px -150px;
}

.hood {
	background: url("./_img/make.gif") no-repeat -400px -150px;
}

/* ********************************************************************temp] */
</style>
<script>
	function getText(el) {
		var text = "";
		if (el != null) {
			if (el.childNodes) {
				for (var i = 0; i < el.childNodes.length; i++) {
					var childNode = el.childNodes[i];
					if (childNode.nodeValue != null) {
						text = text + childNode.nodeValue;
					}
				}
			}
		}
		return text;
	}

	function fn_setReadOnly() {
		var inputs = document.getElementsByTagName("input");
		for (var i = 0; i < inputs.length; i++) {
			if (inputs[i].className.indexOf("readOnly") > -1) {
				inputs[i].readOnly = true;
			}
		}
	}

	var list_ext = null;
	function fn_ext_list(id, defaultValue) {
		var selector = document.getElementById(id);
		var fisrtDiv = selector.getElementsByTagName("div")[0];
		var presentView = fisrtDiv.getElementsByTagName("div")[0];
		var fisrtInput = selector.getElementsByTagName("input")[0];
		var ul = selector.getElementsByTagName("ul")[0];
		ul.onmouseleave = function() {
			ul.style.display = "none";
			list_ext = null;
		}

		fisrtDiv.onclick = function() {
			if (list_ext == null) {
				ul.style.display = "block";
				list_ext = ul;
				ul.onmouseleave = function() {
					ul.style.display = "none";
					list_ext = null;
				}
			} else {
				if (list_ext == ul) {
					ul.style.display = "none";
					list_ext = null;
				} else {
					list_ext.style.display = "none";
					ul.style.display = "block";
					list_ext = ul;
				}
			}
		}

		var list = ul.getElementsByTagName("li");
		for (var i = 0; i < list.length; i++) {
			list[i].onclick = function() {
				this.parentNode.style.display = "none";
				list_ext = null;
				fisrtInput.value = getText(this.getElementsByTagName("span")[0]);
				presentView.className = this.getElementsByTagName("div")[0].className;
			}
		}
		fisrtInput.value = getText(list[defaultValue]
				.getElementsByTagName("span")[0]);
		presentView.className = list[defaultValue].getElementsByTagName("div")[0].className;
	}

	window.onload = function() {
		fn_setReadOnly();

		var divs = document.getElementsByTagName("div");
		for (i = 0; i < divs.length; i++) {
			if (divs[i].className == "selector") {
				fn_ext_list(divs[i].id, 0);
			}
		}
	}
	//	fn_ext_list("selector_source", 0);
	//	fn_ext_list("selector_type" ,0);
</script>
</head>
<body>
	<div id="controler02">
		<div
			id="selector_source"
			class="selector">
			<div id="wrapper">
				<div class="preview"></div>
				<input class="readOnly preview_text" />
			</div>
			<ul class="selectList">
				<li id="local"><div class="preview local"></div> <span>local</span></li>
				<li id="web"><div class="preview web"></div> <span>web</span></li>
				<li id="tag"><div class="preview tag"></div> <span>tag</span></li>
				<li id="category"><div class="preview category"></div> <span>category</span></li>
			</ul>
		</div>
		<div
			id="selector_type"
			class="selector">
			<div id="wrapper">
				<div class="preview"></div>
				<input class="readOnly preview_text" />
			</div>
			<ul class="selectList">
				<li id="nonSleeve"><div class="preview nonSleeve"></div> <span>nonSleeve</span></li>
				<li id="halfSleeve"><div class="preview halfSleeve"></div> <span>halfSleeve</span></li>
				<li id="MTM"><div class="preview MTM"></div> <span>MTM</span></li>
				<li id="sibori"><div class="preview sibori"></div> <span>sibori</span></li>
				<li id="hood"><div class="preview hood"></div> <span>hood</span></li>
			</ul>
		</div>
	</div>
</body>
</html>